<template>
  <div class="content">
    <div class="inputDom">
      <el-input v-model="input" placeholder="请输入收款金额"></el-input>
      <el-button type="success" @click="MakeQrcode" id="btn"
        >生成二维码</el-button
      >
    </div>
    <!-- 展示二维码 -->
    <div class="qrcode" ref="qrcodeDom"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import QRcode from "qrcodejs2"; // 引入生成二维码插件

let input = ref("");
let qrcodeDom: any = ref(null);

let MakeQrcode = () => {
  // console.log(qrcodeDom.value); // 拿到的就是上面的dom元素
  qrcodeDom.value.innerHTML = ""; // 每次生成之前清空二维码
  nextTick(() => {
    // 第一个参数是操作的dom元素，第二个参数是配置项
    new QRcode(qrcodeDom.value, {
      text: input.value, // 生成二维码的类容
      colorDark: "#000", // 二维码颜色
      colorLight: "#fff", // 二维码的背景颜色
      correctLevel: QRcode.CorrectLevel.H,
    });
  });
};
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  .inputDom {
    width: 400px;
    margin: 0 auto;
  }
  .qrcode {
    width: 300px;
    height: 300px;
    margin: 20px auto;
  }
  #btn {
    margin-top: 20px;
  }
}
</style>
